{% load spirit_tags i18n %}
{% load static %}
{% load_settings 'ST_EXTENDED_FONT' %}
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>{% block title %}{% endblock %} - {{ config.site_name }}</title>
  <meta name="description" content="{{ config.site_description }}">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="{% static "spirit/stylesheets/styles.all.min.css" %}">

  <script src="{% static "spirit/scripts/all.min.js" %}"></script>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      stModules.tab(document.querySelectorAll('.js-tab'));
      stModules.postify(document.querySelectorAll('.js-post'), {
        csrfToken: "{{ csrf_token }}"
      });
      stModules.messages(document.querySelectorAll('.js-messages'));
      {% if user.is_authenticated %}
        stModules.notification(document.querySelectorAll('.js-tab-notification'), {
          notificationUrl: "{% url "spirit:topic:notification:index-ajax" %}",
          notificationListUrl: "{% url "spirit:topic:notification:index-unread" %}",
          mentionTxt: "{% trans "{user} has mention you on {topic}" %}",
          commentTxt: "{% trans "{user} has commented on {topic}" %}",
          showAll: "{% trans "Show all" %}",
          empty: "{% trans "No new notifications, yet" %}",
          unread: "{% trans "unread" %}"
        });
      {% endif %}
      stModules.clickableArea({
        areaClass: '.js-clickable-area',
        targetColor: 'var(--st-text-link-hover)'
      });

    });
  </script>

  {% if st_settings.ST_EXTENDED_FONT %}
    <style>
      @font-face {
        font-family: 'Ubuntu';
        font-style: normal;
        font-weight: 300;
        src: url("{% static "spirit/stylesheets/vendors/fonts/Ubuntu-all-300.woff2" %}") format('woff2'),
        url("{% static "spirit/stylesheets/vendors/fonts/Ubuntu-all-300.woff" %}") format('woff');
      }
    </style>
  {% endif %}

  {% block head-extra %}{% endblock %}
  {% block custom_head_extra %}{% endblock %}
</head>

<body>
<div class="spirit_wrapper">
  <div class="spirit_custom_header">
    {% block custom_before_spirit_body %}{% endblock %}
  </div>
  <div class="spirit">
    <div class="layout">
      {% include 'spirit/_header.html' %}
      {% block content %}{% endblock %}
      {% include 'spirit/_footer.html' %}
    </div>
  </div>
  <div class="spirit_custom_footer">
    {% block custom_after_spirit_body %}{% endblock %}
  </div>
</div>
</body>

</html>
